import React, { Component,useState } from 'react'
import { request } from '../../api'
import { Table, Tag, Space, Button,Form ,Input,Select ,Modal,message,Popconfirm} from 'antd';
import { roleList } from '../../utils';
import "./index.scss"
import {observer} from "mobx-react"
import mobxdata from "../../mobx/data"
import {reg} from "../../utils/validate"
const {phone,pwd}  = reg;
const { Option } = Select;
@observer
export default class UserList extends Component {
    state={
        list:[],
        visible:false,
        confirmLoading:false,
        updatevisible:false,
        updateconfirmLoading:false,
        userinfo:mobxdata,
        columns:[
            {
                title:"姓名",
                key:"username",
                dataIndex:"username"
            },
            {
                title:"手机号码",
                key:"phone",
                dataIndex:"phone"
            },
            {
                title:"登录密码",
                key:"password",
                // dataIndex:"password",
                render:(text,item)=>{
                    return(
                        (JSON.parse(localStorage.getItem("userinfo")).role>=item.role)?<span>{item.password}</span>
                        :<span>暂无权限</span>
                    )
                }
            },
            {
                title:"权限",
                key:"role",
                render:(text,i)=>{
                    return(
                        // <Button type="primary" size="small">修改</Button>
                        <Tag style={{margin:"0 5px"}} color={  roleList.find(item=>item.role==text.role).color }> {roleList.find(item=>item.role==text.role).title }  </Tag>
                    )
                }
            },
            {
                title:"修改",
                key:"update",
                render:(text,item)=>{
                    return(
                        (JSON.parse(localStorage.getItem("userinfo")).role>=item.role)?<Button type="primary" size="small" onClick={()=>this.updateShow(item)}>修改</Button>
                        :<Button type="primary" size="small">暂无权限</Button>
                    )
                }
            },
            {
                title:"删除",
                key:"delete",
                render:(text,item)=>{
                    return(
                        (JSON.parse(localStorage.getItem("userinfo")).role>=item.role)?<Popconfirm  
                        placement="topRight"
                        title="是否删除？"
                        onConfirm={()=>this.confirm(item)}
                        okText="确定"
                        cancelText="取消">
                            <Button type="danger" size="small">删除</Button>
                        </Popconfirm>:
                        <Button type="danger" size="small">暂无权限</Button>
                    )
                }
            },
            
        ]
    }
    updateShow=(item)=>{
        // this.updateFrom.setFieldsValue({...item})
        this.setState({
            updatevisible:true
        })
        setTimeout(()=>{
            console.log(item);
            this.updateFrom.setFieldsValue({...item})
        },200)
    }
    updatehandleCancel=()=>{
        this.updateFrom.resetFields()
        this.setState({
            updatevisible:false,
            // confirmLoading:(false)
        })
    }
    updatehandleOk=()=>{
        var body = this.updateFrom.getFieldValue()
        request.update(body)
        .then(res=>{
            if(res.code==200){
                message.success("修改成功")
                this.setState({
                    updatevisible:false,
                    updateconfirmLoading:false
                })
                request.getuserlist()
                .then(res=>{
                    if(res.code==200){ 
                        this.setState({list:res.result})
                    }
                })
            }else{
                message.error(res.msg)
            }
        })
    }
    confirm=(item)=>{
        console.log(item);
        request.delone(item)
        .then(res=>{
            if(res.code==200){
                message.success(res.msg)
                request.getuserlist()
                .then(res=>{
                    if(res.code==200){ 
                        this.setState({list:res.result})
                    }
                })
            }
        })
    }
    componentDidMount(){
        request.getuserlist()
        .then(res=>{
            if(res.code==200){ 
                this.setState({list:res.result})
            }
        })
    }
    onGenderChange=()=>{

    }
    onReset=()=>{
        this.searchFrom.resetFields()
    }
    startSearchData=(value)=>{
        // console.log(value);
        request.getuserlist(value)
        .then(res=>{
            if(res.code==200){
                this.setState({
                    list:res.result
                })
            }
        })
    }
    showModal=()=>{
        this.setState({
            visible:true
        })
    }
    handleOk=()=>{

        this.setState({
            confirmLoading:true
        })
        
        var value = {}
        value = this.addFrom.getFieldValue()
        if(!this.addFrom.getFieldValue().password){
            value = {...value,password:"tzx123"}
        }
        console.log(value);
        request.postmessage(value)
        .then(res=>{
            if(res.code==200){
                this.setState({
                    visible:false,
                    confirmLoading:(false)
                })
                this.addFrom.resetFields()
                request.getuserlist()
                .then(res=>{
                    if(res.code==200){ 
                        this.setState({list:res.result})
                    }
                })
                
            }else{
                message.error(res.msg);
                this.addFrom.resetFields()
                this.setState({
                    visible:false,
                    confirmLoading:(false)
                })
            }
        })
    }
    handleCancel=()=>{
        this.addFrom.resetFields()
        this.setState({
            visible:false,
            // confirmLoading:(false)
        })
    }
    render() {
        const {userinfo} = mobxdata
        return (
            <div className="site-layout-background" style={{ padding: 24, minHeight: 760 }}>
                <Form ref={el=>this.searchFrom=el}
                    onFinish={this.startSearchData} className="fromSearch">
                    
                    <Form.Item>
                        <Button htmlType="button" onClick={this.showModal}>
                            添加
                        </Button>
                    </Form.Item>
                    <Form.Item name="phone" label="phone" className="fromInput">
                        <Input></Input>
                    </Form.Item>
                    <Form.Item name="username" label="username" >
                        <Input></Input>
                    </Form.Item>
                    <Form.Item name="role" label="role">
                        <Select
                        placeholder="选择权限"
                        onChange={this.onGenderChange}
                        allowClear
                        >
                            {
                                roleList.map((item,i)=>{
                                    return (
                                        (userinfo.role>item.role)&&<Option value={item.role} key={i} > {item.title}</Option>
                                    )
                                })
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">
                            查询
                        </Button>
                        <Button htmlType="button" onClick={this.onReset}>
                            重置
                        </Button>
                    </Form.Item>
                </Form>
                {/* 添加modal */}
                <Modal
                        title="添加信息"
                        visible={this.state.visible}
                        onOk={this.handleOk}
                        confirmLoading={this.state.confirmLoading}
                        onCancel={this.handleCancel}
                    >
                        <Form ref={el=>this.addFrom=el}
                            className="addFrom"
                            >
                        <Form.Item name="phone" label="phone" rules={[{ required: true, message: 'Please input your phone!' },{
                        pattern:phone,message:'请输入正确格式的手机号码'
                    }]}>
                            <Input></Input>
                        </Form.Item>
                        <Form.Item name="username" label="username" >
                            <Input></Input>
                        </Form.Item>
                        <Form.Item name="password" label="password" >
                            <Input defaultValue="tzx123" ></Input>
                        </Form.Item>
                        <Form.Item name="role" label="role">
                            <Select
                            placeholder="选择权限"
                            allowClear
                            >
                                {
                                    roleList.map((item,i)=>{
                                        return (
                                            (userinfo.role>item.role)&&<Option value={item.role} key={i} > {item.title}</Option>
                                        )
                                    })
                                }
                            </Select>
                        </Form.Item>
                    </Form>
                </Modal>

                {/* 修改model */}
                <Modal
                        title="修改信息"
                        visible={this.state.updatevisible}
                        onOk={this.updatehandleOk}
                        confirmLoading={this.state.updateconfirmLoading}
                        onCancel={this.updatehandleCancel}
                    >
                        <Form ref={el=>this.updateFrom=el}
                            className="addFrom"
                            >
                        <Form.Item name="_id" label="id" >
                            <Input disabled></Input>
                        </Form.Item>
                        <Form.Item name="phone" label="phone" rules={[{ required: true, message: 'Please input your phone!' },{
                        pattern:phone,message:'请输入正确格式的手机号码'
                    }]}>
                            <Input></Input>
                        </Form.Item>
                        <Form.Item name="username" label="username" rules={[{ required: true, message: 'Please input your username!' }]}>
                            <Input></Input>
                        </Form.Item>
                        <Form.Item name="password" label="password" rules={[{ required: true, message: 'Please input your password!' }]}>
                            <Input></Input>
                        </Form.Item>
                        <Form.Item name="role" label="role" rules={[{ required: true, message: 'Please input your role!' }]}>
                            <Select
                            placeholder="选择权限"
                            allowClear
                            >
                                {
                                    roleList.map((item,i)=>{
                                        return (
                                            (userinfo.role>item.role)&&<Option value={item.role} key={i} > {item.title}</Option>
                                        )
                                    })
                                }
                            </Select>
                        </Form.Item>
                    </Form>
                </Modal>


                <Table dataSource={this.state.list} columns={this.state.columns} rowKey={(item)=>item._id} pagination={{pageSize:10}}>
                    
                </Table>
            </div>
        )
    }
}
